<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>ajax入门案例</h1>
		<script src="../js/axios.js"></script>
		<script>
		//3,Axios的优化
		axios.defaults.baseURL="http://localhost:8080"
		
		//编辑自己的js的代码
		let url1="http://localhost:8080/axios/findStr"
		/*axios.get(url1)//axios将Ajax包装了
			.then(function(result){//回调函数
				console.log(result.data)
			})*/
			//promise是Axios封装服务器返回值的对象
			axios.get("/axios/findStr")
				.then(function(promise){//回调函数
					console.log(promise)
					console.log(promise.data)
				}) 
				//2,带参数的业务调用 返回字符串+
				let url2="http://localhost:8080/axios/getUserById?id=100"; 
				axios.get(url2)
				.then(function(promise){
					console.log(promise.data)
				})
				
				//4,对象参数传递写法 利用API自动拼接参数
				let user ={id: 99,name: "tomcat"}
				axios.get("/axios/findUser",{params:user})
				.then(function(promise){
					console.log(promise.data)
				})
				
				//4,RestFull结构实现数据传递
				//let rest={id:100,name:"tomcat",age:19}
				// axios.get("/axios/result/"+rest.id+"/"+rest.name+"/"+rest.age).then(function(promise){
				// 	console.log(promise.data)
				// })
				
				/*模板字符串写法:
				语法:反引号
				字符取值:${rest2.id}
				作用:1,常见字符串拼接
				2,可以保证代码的数据结构*/
				let rest2={id: 100,name: "tomcat",age:20}
				axios.get(`/axios/result/${rest2.id}/${rest2.name}/${rest2.age}`)
				     .then(function(promise){
					console.log(promise.data)
				})
				//模板字符串 保证代码的格式
				let div=`<div>
				<p>天青色等烟雨</p>
				<p>而我在等你</p>
				<p>天青色等烟雨</p>
				<p>而我在等你</p>
				</div>`
				
		</script>
	</body>
</html>
